<template>
	<div>
		<block v-if="showNum == 1 || showNum == 2">
			<!-- 样式一 -->
			<div class="show-box">
				<div class="box-one" :style="{marginRight:marginRight + 'vw'}">
					<image src="/static/img/posters.png" mode="aspectFill"
						:style="{borderRadius:borderRadius + 'vw',width:width}"></image>
				</div>
				<div class="box-two">
					<image src="/static/img/posters.png"
						:style="{marginBottom:marginBottom + 'vw',borderRadius:borderRadiusTwo + 'vw',width:twoWidth,height:twoHeight}"
						mode="aspectFill"></image>
					<image src="/static/img/posters.png" mode="aspectFill"
						:style="{borderRadius:borderRadiusThree + 'vw',width:twoWidth,height:twoHeight}"></image>
				</div>
			</div>
		</block>
		<block v-else-if="showNum == 3 || showNum == 4">
			<!-- 样式三 -->
			<div class="showThree-box">
				<div class="box-one" :style="{marginRight:marginRight+'vw'}">
					<image src="/static/img/posters.png" mode="aspectFill" :style="{width,height,borderRadius:borderRadius,marginBottom}"></image>
					<image src="/static/img/posters.png" mode="aspectFill" :style="{width,height,borderRadius:borderRadiusFour}"></image>
				</div>
				<div class="box-two">
					<image src="/static/img/posters.png" mode="aspectFill" :style="{width,height,borderRadius:borderRadiusTwo,marginBottom}"></image>
					<image src="/static/img/posters.png" mode="aspectFill" :style="{width,height,borderRadius:borderRadiusThree}"></image>
				</div>
			</div>
		</block>
		<block v-else-if="showNum == 5">
			<!-- 样式五 -->
			<div class="showFive">
				<div>
					<image src="/static/img/posters.png" mode="aspectFill"></image>
				</div>
			</div>
		</block>
	</div>
</template>

<script>
	export default {
		props: {
			showNum: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				marginRight: 2.13, //图片右边距
				marginBottom: 2.13, //样式一二右边图片的下边距
				borderRadius: 2.13, //第一张图片的圆角
				borderRadiusThree: 2.13, //第二张图片的圆角
				borderRadiusTwo: 2.13, //第三张图片的圆角
				width: 44.8, //样式一二左边图片的宽
				twoWidth: 44.53, //样式一二右边图片的宽
				twoHeight: 31.2, //样式一二右边图片的高
				borderRadiusFour: 2.13, //样式三四图片的圆角
				height:44.8
			}
		},
		computed: {
			leftBox() {
				if (this.showNum == 1) {
					this.marginRight = '2.13';
					this.borderRadius = '2.13';
					this.marginBottom = '2.13';
					this.borderRadiusThree = '2.13';
					this.borderRadiusTwo = '2.13';
					this.width = '44.8vw';
					this.twoHeight = '31.2vw';
					this.twoWidth = '44.53vw';
				} else if (this.showNum == 2) {
					this.marginRight = '0';
					this.marginBottom = '0';
					this.borderRadius = '2.13vw 0vw 0vw 2.13';
					this.borderRadiusTwo = '0vw 2.13vw 0vw 0';
					this.borderRadiusThree = '0vw 0vw 2.13vw 0';
					this.width = '45.87vw';
					this.twoHeight = '32vw';
					this.twoWidth = '45.6vw';
				} else if (this.showNum == 3) {
					this.width = '44.8vw';
					this.height = '44.8vw';
					this.borderRadius = '2.13vw';
					this.marginBottom = '2.13vw';
					this.borderRadiusTwo = '2.13vw';
					this.borderRadiusThree = '2.13vw';
					this.borderRadiusFour = '2.13vw';
				} else if (this.showNum == 4) {
					this.marginBottom = '0';
					this.marginRight = '0';
					this.width = '45.87vw';
					this.height = '45.87vw';
					this.borderRadius = '2.13vw 0 0 0';
					this.borderRadiusTwo = ' 0 2.13vw 0 0';
					this.borderRadiusThree = '0 0 2.13vw 0';
					this.borderRadiusFour = '0 0 0 2.13vw'
				}
			}
		}
		// mounted() {
		// 	if(this.showNum == 1){
		// 		this.$refs.one.style.marginRight = '2.13vw'
		// 	}
		// }
	}
</script>

<style lang="scss">
	.show-box {
		padding: 4.27vw;
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;

		.box-two {
			display: flex;
			flex-direction: column;

			.mar {
				margin-bottom: 0;
			}
		}
	}

	.showThree-box {
		padding: 4.27vw;
		display: flex;
		flex-direction: row;

		image {
			display: block;
		}

		.box-one {
			border-right: 1px solid #F8F8F8;
		}
	}
	.showFive{
		padding: 4.27vw;
		background-color: #FFFFFF;
		image{
			width: 91.47vw;
			height: 60.8vw;
			border-radius: 2.13vw;
		}
	}
</style>
